<template>
  <div style="width:100%" class="flex">
    <div class="listDataLeft flexColumn">
      <div class="listTitle flex-align-center">
        <img src="../../../../assets/icons/orderListIcon.png" />
        订单列表
      </div>
      <div class="listSearch">
        <div class="searchBox relative">
          <el-input
            ref="searchInput"
            v-model="keyWord"
            placeholder="请输入关键词搜索"
            style="width:71%;margin-left:10px;"
          ></el-input>
          <el-button type="primary" @click="btnSeach()" class="searchBtn fr">搜索</el-button>
        </div>
      </div>
      <div class="flex1 flexColumn orderListBox">
        <div class="card-container">
          <el-tabs>
            <el-tab-pane v-for="(item,index) in orderList" :key="index" :label="item.title">
              <el-tree :data="item.children" :props="defaultProps" @node-click="handleNodeClick"></el-tree>
            </el-tab-pane>
          </el-tabs>
        </div>
      </div>
    </div>

    <!-- 流程盒子 -->

    <div class="listDataCenter">
      <div class="flowCut" @click="flowCut()">{{flowCutName}}</div>
      <div class="centerBox flexColumn relative">
        <div class="Demo">
          <div class="Before" :class="isTop  ? 'contain-Before' : ''">
            <div class="centerTitle flex-align-center">
              <span class="centerTitleText flex-align-center">
                <img src="../../../../assets/icons/orderProgressIcon.png" />
                {{flowTitle}}
              </span>
              <!-- <img v-if="!stopLoop" src="../../../../assets/icons/fullScreen.png" class="finger" @click="fullScreenCenter"/>-->
            </div>
            <!-- 处理订单流程步骤开始 -->
            <div class="processBox">
              <div style="height:200px;width:870px; margin:10px auto" class="relative">
                <div v-for="(item, index) in flowBox1" :key="'flowBox' + index">
                  <div class="flowBox fl">
                    <img
                      :src="item.masterImg"
                      class="img"
                      @click="goDetail(item)"
                      :class="[item.isActive==0?'imgAnmail':'']"
                    />
                    <p>{{item.orderName}}</p>
                    <p>流程:{{item.orderNum}}</p>
                    <p>{{item.orderTime}}</p>
                  </div>
                  <div class="liudong" v-if="index==4">
                    <img :src="item.stateImg" />
                  </div>
                  <div class="flowBox fl flowImgBox" v-else>
                    <img :src="item.stateImg" />
                  </div>
                </div>
              </div>
              <div style="height:200px;width: 870px; margin:41px auto;">
                <div v-for="(item, index) in flowBox2" :key="'flowBox' + index">
                  <div class="flowBox" style="float:right">
                    <img
                      :src="item.masterImg"
                      class="img"
                      :class="[item.isActive==0?'imgAnmail':'']"
                      @click="goDetail(item)"
                    />
                    <p>{{item.orderName}}</p>
                    <p>流程:{{item.orderNum}}</p>
                    <p>{{item.orderTime}}</p>
                  </div>
                  <div class="flowBox flowImgBox" style="float:right">
                    <img
                      :src="item.stateImg"
                      style="ransform: rotate(180deg); -ms-transform: rotate(180deg); -moz-transform: rotate(180deg);-webkit-transform: rotate(180deg);-o-transform: rotate(180deg);"
                    />
                  </div>
                </div>
              </div>
            </div>
            <!-- 处理订单流程步骤结束 -->
            <!-- <div class="centerLabelBox flex-align-center">
                    <span class="labelBox bg-blue"></span>
                    <span>已完成</span>
                    <span class="labelBox bg-gray"></span>
                    <span>未开始</span>
                    <span class="labelBox bg-yellow"></span>
                    <span>进行中</span>
                    <span class="labelBox bg-red"></span>
                    <span>异常延期</span>
            </div>-->
          </div>
          <div class="After" :class="isTop  ? 'contain-After' : ''">
            <div class="videoMenu">
              <ul v-for="(item, index) in flowBox" :key="'flowBox' + index">
                <li>{{item.orderName}}({{item.orderNum}})</li>
              </ul>
            </div>
            <div
              v-for="(item,index) in videoFile"
              :key="index"
              style="width:820px;height: 510px;float:left; "
            >
              <Flvvideo
                :url="item.path"
                style="width:100%;height: 510px;object-fit:fill;"
                :id="'video' + index"
              ></Flvvideo>
            </div>
          </div>
        </div>
      </div>

      <div class="orderDetail">订单详情</div>
      <div class="proBottomBox">
        <div class="bottomDetail-a" v-show="isDetail">
          <ul>
            <li>客户名称：{{oDetail.custName}}</li>
            <li>下单时间：{{oDetail.SalOrderDate}}</li>
            <li>数 量：{{oDetail.salQty}}</li>
            <li>生产单号：{{oDetail.salBillno}}</li>
            <li>物料名称：{{oDetail.materialName}}</li>
            <li>物料编号：{{oDetail.materialNumber}}</li>
          </ul>
        </div>
        <div class="bottomDetail-b" v-show="isLookDetail">
          <div class="bottomTitle">
            <el-button type="primary" class="btnLook" @click="btnLook()">查看工单明细</el-button>
          </div>
          <div class="bottomDiv flex">
            <div class="leftBottm">
              <div class="leftBottom">订单数量：{{oDetail.salQty}}</div>
              <div class="leftBottom">投产数量：{{oDetail.putQty}}</div>
              <div class="leftBottom">产出数量：{{oDetail.outQty}}</div>
              <div class="leftBottom">未完工数：{{oDetail.unfinishedQty}}</div>
            </div>
            <div class="flex1 flex rightBottom">
              <div>
                <p>SMT</p>
                <p>产出数：{{oDetail.smtOutQty}}</p>
              </div>
              <div>
                <p>DIP</p>
                <p>产出数：{{oDetail.dipOutQty}}</p>
              </div>
              <div>
                <p>TEST</p>
                <p>产出数：{{oDetail.testOutQty}}</p>
              </div>
              <div>
                <p>Repair</p>
                <p>产出数：{{oDetail.repairOutQty}}</p>
              </div>
              <div>
                <p>PACK</p>
                <p>产出数：{{oDetail.packOutQty}}</p>
              </div>
            </div>
          </div>
        </div>
        <div class="bottomDetail-c" v-show="isWorkOrder">
          <div class="bottomTitle flex">
            <el-button class="btnLook" @click="btnBack()">
              <i class="el-icon-back"></i>返回
            </el-button>

            <div
              class="btnLook btn-border"
              :class="{styleName:index == currents}"
              v-for="(item,index) in lookTitle"
              :key="index"
              @click="workOrderCur(item,index)"
            >{{item.title}}</div>
          </div>
          <div class="bottomDiv flex">
            <div class="leftBottm">
              <div class="leftBottom">工单数量：{{proDetail.proQty}}</div>
              <div class="leftBottom">工单投入：{{proDetail.proPutQty}}</div>
              <!-- <div class="leftBottom">产出数量：{{proDetail.outQty}}</div> -->
              <div class="leftBottom">未完工数：{{proDetail.unfinishedQty}}</div>
              <div class="leftBottom">不良品数：{{proDetail.badQty}}</div>
            </div>
            <div class="flex1 flex rightBottom">
              <div>
                <p>SMT</p>
                <p>产出数：{{proDetail.smtOutQty}}</p>
                <p>投入数：{{proDetail.smtPutQty}}</p>
                <p>
                  不良数：
                  <span>{{proDetail.smtBadQty}}</span>
                </p>
              </div>
              <div>
                <p>DIP</p>
                <p>产出数：{{proDetail.dipOutQty}}</p>
                <p>投入数：{{proDetail.dipPutQty}}</p>
                <p>
                  不良数：
                  <span>{{proDetail.dipBadQty}}</span>
                </p>
              </div>
              <div>
                <p>TEST</p>
                <p>产出数：{{proDetail.testOutQty}}</p>
                <p>投入数：{{proDetail.testPutQty}}</p>
                <p>
                  不良数：
                  <span>{{proDetail.testBadQty}}</span>
                </p>
              </div>
              <div>
                <p>Repair</p>
                <p>产出数：{{proDetail.repairOutQty}}</p>
                <p>投入数：{{proDetail.repairPutQty}}</p>
                <p>
                  不良数：
                  <span>{{proDetail.repairBadQty}}</span>
                </p>
              </div>
              <div>
                <p>PACK</p>
                <p>产出数：{{proDetail.packOutQty}}</p>
                <p>投入数：{{proDetail.packPutQty}}</p>
                <p>
                  不良数：
                  <span>{{proDetail.packBadQty}}</span>
                </p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 右边内容 -->
    <div class="listDataRight flexColumn">
      <div class="listTitle flex-align-center">
        <img src="../../../../assets/icons/icon_018.png" />生产报警
      </div>
      <!-- 生产报警 -->
      <alarmMo></alarmMo>

      <div class="listTitle flex-align-center">
        <img src="../../../../assets/icons/commuIcon.png" />企业通讯
      </div>

      <!-- 企业通讯 -->
      <message :propObj="orderList"></message>
    </div>
  </div>
</template>

<script>
import Flvvideo from '@/components/_Flvvideo/Flvvideo'
import HlsVideo from '@/components/_Hlsvideo/Hlsvideo'
import alarmMo from '@/views/home/BoardPage/RunBoard/alarmMo'
import message from '@/views/home/message'
import {
  getOrderList,
  getOrderProtop,
  getOrderDetail,
  getFlowlist,
  getProlist,
  getProdetail,
} from '@/api/home/home'
export default {
  name: 'runborder',
  components: {
    HlsVideo,
    Flvvideo,
    message,
    alarmMo,
  },
  data() {
    return {
      activeName: '0',
      orderList: [],
      keyWord: '',
      seleList: '',
      isTop: false,
      flowCutName: '视屏',
      currents: 1,
      flowBox: [],
      flowBox1: [],
      flowBox2: [],
      flowTitle: '',
      orderDeatil: '',
      proDetail: '',
      detailData: '',
      lookTitle: [],
      oDetail: '',
      videoFile: [
        {
          path: 'http://192.168.13.144:8088/rtsp/0F5B6FBB.flv', //PACK
        },
      ],
      isDetail: false,
      isLookDetail: true,
      isWorkOrder: false,
      defaultProps: {
        children: 'children',
        label: 'title',
      },
    }
  },
  created() {
    this.orderLists()
    this.orderFlow()
  },
  methods: {
    btnSeach() {
      this.orderLists()
    },

    handleClick(tab, event) {
      console.log(tab, event)
    },

    //订单列表
    orderLists() {
      let self = this
      let params = Object.assign({
        time: '-30',
        keyWord: this.keyWord,
        factory: '0',
      })
      console.log('请求参数：', params)
      getOrderList(params).then((res) => {
        if (res.code == 200) {
          self.orderList = res.data
          console.log(self.orderList)
        } else {
          self.$message.warning(res.msg)
        }
      })
    },

    //点击选择
    handleNodeClick(data) {
      this.seleList = data
      console.log(this.seleList)
      this.orderFlow()
      this.orderDetail()
      this.isLookDetail = false
      this.isWorkOrder = false
      this.isDetail = true
    },
    //订单详情
    goDetail(item) {
      console.log(item)
      this.isLookDetail = true
      this.isWorkOrder = false
      this.isDetail = false
      this.detailData = item
      let params = Object.assign({
        orderid: item.orderId ? item.orderId : '',
        materialid: item.materialId ? item.materialId : '',
      })
      getOrderProtop(params).then((res) => {
        if (res.code == 200) {
          this.oDetail = res.data
        } else {
          self.$message.warning(res.msg)
        }
      })
    },

    flowCut() {
      this.isTop = !this.isTop
      if (!this.isTop) {
        this.flowCutName = '视屏'
      } else {
        this.flowCutName = '流程'
      }
    },
    //订单详情第一步
    orderDetail() {
      let self = this
      let params = Object.assign({
        orderid: self.seleList.salOrderId ? self.seleList.salOrderId : '102867',
        materialid: self.seleList.materialId ? self.seleList.materialId : '',
      })
      console.log('请求参数：', params)
      getOrderDetail(params).then((res) => {
        if (res.code == 200) {
          self.oDetail = res.data
        } else {
          self.$message.warning(res.msg)
        }
      })
    },

    //订单流程
    orderFlow() {
      let self = this
      let params = Object.assign({
        orderid: self.seleList.salOrderId ? self.seleList.salOrderId : '102867',
        materialid: self.seleList.materialId ? self.seleList.materialId : '',
      })
      console.log('请求参数：', params)
      getFlowlist(params).then((res) => {
        if (res.code == 200) {
          self.flowTitle = res.data.title
          self.flowBox = res.data.flowBox
          self.flowBox1 = self.flowBox.slice(0, 5)
          self.flowBox2 = self.flowBox.slice(5, self.flowBox.length)
          console.log(self.flowBox1)
          console.log(self.flowBox2)
          console.log(self.flowBox)
        } else {
          self.$message.warning(res.msg)
        }
      })
    },

    // 查看工单明细
    btnLook() {
      let self = this
      let params = Object.assign({
        orderid: self.seleList.salOrderId ? self.seleList.salOrderId : '102867',
        materialid: self.seleList.materialId ? self.seleList.materialId : '',
      })
      getProlist(params).then((res) => {
        if (res.code == 200) {
          this.lookTitle = res.data
          console.log(this.lookTitle)
        } else {
          self.$message.warning(res.msg)
        }
      })
      this.isLookDetail = false
      this.isWorkOrder = true
    },

    //工单详情
    workOrderCur(item, index) {
      this.currents = index
      console.log(item.title)
      let params = Object.assign({
        mobillno: item.title,
        // mobillno: 'M2002108267-D1',
      })
      getProdetail(params).then((res) => {
        if (res.code == 200) {
          this.proDetail = res.data
        } else {
          self.$message.warning(res.msg)
        }
      })
    },

    btnBack() {
      this.isLookDetail = true
      this.isWorkOrder = false
    },
  },
  watch: {},
}
</script>

<style lang="less" scoped>
.listDataLeft {
  width: 330px;
  height: 825px;
  float: left;
  .orderListBox {
    overflow: auto;
    background-color: white;
    .active {
      background-color: #f5f5f7;
      color: #2175ff;
      .itemTitle {
        color: #2175ff;
      }
    }
    & > div {
      cursor: pointer;
      padding: 0 10px;
      font-size: 14px;
    }
    p {
      width: 100%;
      font-size: 16px;
    }
    // ul {
    //   width: 292px;
    //   overflow: auto;
    //   overflow: hidden;
    //   white-space: nowrap;
    //   text-overflow: ellipsis;
    //   li {
    //     font-size: 14px;
    //     float: left;
    //     margin: 0 5px;
    //   }
    // }
    .ant-tabs {
      overflow: auto;
      min-height: 745px;
    }
  }
  .listTitle {
    padding: 0 5px;
    font-size: 22px;
  }
}

/* 流程 */
.flowCut {
  height: 36px;
  line-height: 36px;
  font-size: 16px;
  padding-left: 10px;
}
.listDataCenter {
  flex: 1;
  height: 855px;
  min-width: 994px;
  .centerBox {
    height: 510px;
    margin: 0 10px;
    background-color: white;

    .centerTitle {
      .centerTitleText {
        height: 36px;
        img {
          margin-right: 6px;
        }
      }
      height: 36px;
      padding: 0 46px;
      line-height: 36px;
      color: #888888;
      font-size: 16px;
      justify-content: space-between;
      img {
        width: 16px;
        height: 16px;
      }
    }
    .centerLabelBox {
      padding: 0 16px;
      font-size: 14px;
      justify-content: flex-end;
      min-width: 855px;
    }
    .processBox {
      min-width: 855px;
      margin: 0 auto;
      height: 430px;
      .progressImgBox {
        width: 800px;
        .progressFlow {
          width: 200px;
          height: 100px;
          line-height: 100px;
          text-align: center;
          float: left;
        }
        img {
          display: block;
          height: 480px;
          width: 690px;
          margin: 0 auto;
        }
      }
      .flowBox {
        width: 95px;
        height: 200px;
        float: left;
        text-align: center;
        .img {
          width: 77px;
          height: 85px;
          display: inline-block;
          margin-bottom: 10px;
          cursor: pointer;
        }
        p {
          margin: 0;
          text-align: center;
        }
        .imgAnmail {
          width: 104px;
          height: 92px;
          -webkit-animation-name: scaleDraw;
          /*关键帧名称*/
          -webkit-animation-timing-function: ease-in-out;
          /*动画的速度曲线*/
          -webkit-animation-iteration-count: infinite;
          /*动画播放的次数*/
          -webkit-animation-duration: 4s;
          /*动画所花费的时间*/
        }
      }
      .flowImgBox {
        height: 200px;
        line-height: 200px;
      }
      .liudong {
        width: 20px;
        height: 80px;
        position: absolute;
        right: 40px;
        top: 150px;
      }
    }
  }
  .orderDetail {
    height: 40px;
    line-height: 40px;
    padding-left: 13px;
    font-size: 16px;
  }
  .proBottomBox {
    height: 275px;
    margin: 0 10px;
    background-color: white;
    .bottomDetail-a {
      width: 973px;

      ul {
        width: 90%;
        margin-left: 5%;
        font-size: 15px;
        padding-top: 20px;
        li {
          width: 50%;
          float: left;
          height: 30px;
          line-height: 30px;
        }
      }
    }
    .bottomDetail-b,
    .bottomDetail-c {
      width: 973px;
      .bottomTitle {
        width: 100%;
        height: 40px;
        .btnLook {
          margin: 15px 0 0 25px;
          cursor: pointer;
        }
        .btn-border {
          height: 30px;
          line-height: 28px;
          padding: 0 10px;
          border-radius: 2px;
          color: #1890ff;
          border: 1px solid #1890ff;
        }
        .btnBack {
          margin: 10px;
        }
      }
      .bottomDiv {
        width: 973px;
        height: 190px;
        margin-top: 20px;
        .rightBottom {
          & > div {
            width: 20%;
            p {
              span {
                color: red;
              }
            }
          }
        }
        .leftBottm {
          width: 260px;
          & > div {
            height: 35px;
            padding-left: 25px;
          }
        }
      }
      .styleName {
        background-color: #1890ff;
        color: #fff !important;
      }
    }
  }
}

.listDataRight {
  width: 320px;
}

/* 列表搜索 */
.listSearch {
  font-size: 16px;
  .searchBox {
    background-color: white;
    .ant-input-affix-wrapper {
      width: 70%;
      float: none;
      margin-left: 10px;
    }
    .searchBtn {
      margin: 0;
      margin-right: 10px;
    }
  }
}

.curTab {
  background-color: #fff;
  height: 50px;
  & > div {
    width: 21%;
    text-align: center;
    margin: 10px 0 10px 3%;
    border-radius: 5px;
    height: 26px;
    line-height: 25px;
    color: #1890ff;
    font-size: 12px;
    cursor: pointer;
    border: 1px solid #1890ff;
  }

  .styleName {
    background-color: #1890ff;
    color: #fff;
  }
}

//切换导航
.card-container {
  // background: #f5f5f5;
  // overflow: hidden;
  // padding: 24px;
}
.card-container > .ant-tabs-card > .ant-tabs-content {
  height: 120px;
  margin-top: -16px;
}

.card-container > .ant-tabs-card > .ant-tabs-content > .ant-tabs-tabpane {
  background: #fff;
}

.card-container > .ant-tabs-card > .ant-tabs-bar {
  border-color: #fff;
}

.card-container > .ant-tabs-card > .ant-tabs-bar .ant-tabs-tab {
  border-color: transparent;
  background: transparent;
}

.card-container > .ant-tabs-card > .ant-tabs-bar .ant-tabs-tab-active {
  border-color: #fff;
  background: #fff;
}

/* 底部栏 */
.productData {
  margin-top: 10px;
  height: 300px;
  .productDataLeft {
    background: white;
    .leftTitle {
      font-size: 14px;
      font-weight: 700;
      height: 40px;
      padding: 0 10px;
      border-bottom: 1px solid #f0f0f0;
      align-items: center;
    }
    .progressBox {
      height: 100%;
      padding: 20px;
      & > div {
        border-bottom: 1px solid #f0f0f0;
        align-items: center;
        height: 36px;
        box-sizing: border-box;
        .progressTitle {
          width: 120px;
          // flex: 2;
        }
        .progressValue {
          width: 40px;
          // flex: 1;
        }
        .progressWrap {
          margin-right: 20px;
          flex: 1;
          .ant-progress-text {
            color: #2175ff;
          }
        }
      }
    }
  }
}

//视屏 流程切换
.Demo {
  width: 100%;
  height: 490px;
  position: relative;
  perspective: 1600px;
  box-sizing: border-box;
}
.Before {
  width: 100%;
  height: 490px;
  position: absolute;
  top: 0;
  left: 0;
  background-repeat: no-repeat;
  background-position: center center;
  backface-visibility: hidden;
  transition: 1.5s;
}
.After {
  width: 100%;
  height: 490px;
  position: absolute;
  top: 0;
  left: 0;
  transform: rotateY(-180deg);
  backface-visibility: hidden;
  transition: 1.5s;
  float: left;
  z-index: 99;
  background-color: #fff;
  .videoMenu {
    width: 20%;
    height: 480px;
    float: left;
    margin-top: 27px;
    background-color: #fff;
    ul {
      li {
        cursor: pointer;
        font-size: 14px;
      }
    }
  }
}
.Demo .contain-Before {
  transform: rotateY(180deg);
}
.Demo .contain-After {
  transform: rotateY(0deg);
}

.el-tabs--border-card {
  border: 1px solid #dcdfe6;
  -webkit-box-shadow: 0;
  box-shadow: 0;
  border: 0;
  margin-top: 10px;
}
.el-tabs__nav-wrap::after {
  background-color: #fff !important;
}
.el-tabs__nav {
  width: 100% !important;
  text-align: center;
}
.el-tabs__active-bar {
  background-color: #fff;
}
.el-input__inner {
  height: 32px !important;
}
</style>